<!DOCTYPE html>
<html layout:decorator="fragments/layout" th:with="index='good',son='sku'" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.thymeleaf.org/" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>管理员管理</title>
    <style>
        .tag [data-role="remove"]::after {
            content: "x";
            padding: 0px 2px;
        }

        .tag [data-role="remove"] {
            margin-left: 8px;
            cursor: pointer;
        }

        .tag {
            margin-right: 5px;
        }

        .table-bordered > tbody > tr > td {
            border: 0px;
        }

        table.dataTable thead th {
            border: 0px;
        }

        table.dataTable.no-footer {
            border: 0px;
        }

    </style>
</head>
<body>
<div layout:fragment="modal">
    <div class="modal right fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">添加SKU属性</h4>
                    <div class="modal-title" style="color: #999999">常用的属性值管理</div>
                </div>
                <div class="modal-body">
                    <div class="box-body">
                        <div class="row">
                            <div class="tableTitle pull-left" style="font-size: 14px">属性信息</div>
                        </div>

                        <div class="row" style="padding-top: 10px">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <input class="form-control" id="a-name">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="tableTitle pull-left" style="font-size: 14px">属性值列表</div>
                        </div>
                        <div class="row" style="padding-top: 10px">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <input class="form-control" id="sku-attribute">
                                </div>
                            </div>
                            <div class="col-sm-1">
                                <div class="form-group">
                                    <button class="btn btn-primary" id="addSkuAttribute">添加</button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12"
                                     style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                    <div class="form-group" style="font-size: 14px">
                                        <div class="col-sm-4">
                                            <div>参数</div>
                                        </div>
                                        <div class="col-sm-5">
                                        </div>
                                        <div class="col-sm-3">
                                            <a>排序</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="attribute-group">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="col-sm-12"
                                         style="height: 50px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                        <div class="form-group" style="font-size: 14px">
                                            <div class="col-sm-4">
                                                <div class="form-group" style="margin-top: 8px;">
                                                    <input class="form-control" style="border: 1px dashed #ccc;">
                                                </div>
                                            </div>
                                            <div class="col-sm-5">
                                            </div>
                                            <div class="col-sm-3" style="margin-top: 15px">
                                                <a style="cursor:pointer">删除</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class=" btn btn-default">取消</button>
                    <button class=" btn btn-primary " onclick="addSku()">确认</button>
                </div>
            </div>
        </div>
        <!-- end 弹出层 moda -->
    </div>
</div>
<div layout:fragment="content">
    <section class="content">
        <div class="box" style="margin-top: 20px">
            <div class="box-body" id="search-form">
                <div style="font-size: 16px;padding-top: 10px;padding-bottom: 10px ;display: inline">属性管理</div>
                <div class="row" style="padding-top: 10px">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label>名称</label>
                            <input class="form-control" id="s-name">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <label style="visibility: hidden">为了好看</label>
                        <div class="form-group">
                            <button type="button" id="clear" class="btn btn-default">清空</button>
                            <button type="button" id="search" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="box-header">
                <div class="tableTitle pull-left" style="font-size: 14px"> 属性详情</div>


                <button class="btn btn-primary btn-xs pull-left" style="margin-left: 20px" data-toggle="modal"
                        data-target="#myModal">新增SKU属性
                </button>


                <button class="btn btn-danger btn-xs pull-left" style="margin-left: 10px"> 删除</button>

            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                    <div class="row">

                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="dms-table" class="table table-bordered table-striped dataTable" role="grid"
                                   aria-describedby="example1_info">
                                <thead>
                                <tr role="row">
                                    <th aria-controls="example1" rowspan="1"
                                        colspan="1" aria-sort="ascending"
                                        aria-label="Rendering engine: activate to sort column descending">商品ID
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="Browser: activate to sort column ascending">商品编号
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="Platform(s): activate to sort column ascending">图片
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="Engine version: activate to sort column ascending">商品名称
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="CSS grade: activate to sort column ascending">销售价(元)
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="CSS grade: activate to sort column ascending">新品
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="CSS grade: activate to sort column ascending">热卖
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="CSS grade: activate to sort column ascending">在售
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="CSS grade: activate to sort column ascending">销售价
                                    </th>
                                    <th aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="CSS grade: activate to sort column ascending">操作
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                                        aria-label="CSS grade: activate to sort column ascending" hidden>操作
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
    </section>

</div>

<div layout:fragment="js">
    <script th:inline="javascript">
        var oTable = $('#dms-table');
        var currentId;

        $('#search').click(function (e) {
            e.preventDefault();
            oTable.DataTable().ajax.reload();
        });

        $('#clear').click(function () {
            reloadTable();
        });

        $('#modifyModalModify').on('click', modifyModal);

        $('#createModalAdd').on('click', createModal);

        function clearModal() {
            $('#c-username').val('');
            $('#c-password').val('');
            $('#c-password1').val('');
        }

        function createModal() {
            var username = $('#c-username').val();
            var password = $('#c-password').val();
            var password1 = $('#c-password1').val();

            var validArgs = {
                "请输入帐号": username,
                "请输入密码": password,
                "请输入确认密码": password1,
            };
            //验证是否为空
            if (!validateArgs(validArgs)) {
                return;
            }

            if (password != password1) {
                toastr.error('请确认两次密码是否一致');
                return;
            }

            $.ajax({
                url: '/admins',
                type: 'post',
                dataType: 'json',
                data: {
                    "username": username,
                    "password": password
                },
                success: function (data) {
                    if (data['code'] == 200) {
                        toastr.success('添加管理员成功');
                        $('#createModal').modal('hide');
                        clearModal();
                        redraw();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var jsonObj = JSON.parse(XMLHttpRequest.responseText);
                    if (XMLHttpRequest.status == 400) {
                        toastr.error(jsonObj['msg']);
                    }
                }
            })
        }

        function modifyModal() {
            var oldpassword = $('#m-oldpassword').val();
            var password = $('#m-password').val();
            var password1 = $('#m-password1').val();

            var validArgs = {
//                "请输入旧密码": oldpassword,
                "请输入新密码": password,
                "请输入确认新密码": password1,
            };
            //验证是否为空
            if (!validateArgs(validArgs)) {
                return;
            }

            if (password != password1) {
                toastr.error('确保两次密码一致');
                return;
            }

            $.ajax({
                url: '/admins/' + currentId,
                type: 'put',
                dataType: 'json',
                data: {
                    "oldpass": oldpassword,
                    "password": password
                },
                success: function (data) {
                    if (data['code'] == 200) {
                        toastr.success('修改密码成功');
                        $('#modifyModal').modal("hide");
                        redraw();
                    } else {
                        toastr.error('修改密码失败：' + data['msg']);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var jsonObj = JSON.parse(XMLHttpRequest.responseText);
                    if (XMLHttpRequest.status == 400) {
                        toastr.error(jsonObj['msg']);
                    }
                }
            })
        }

        $('#dms-table').find('tbody').on('click', 'tr button.modify', function (e) {
            e.preventDefault();
            var table = oTable.DataTable();
            var data = table.row($(this).parents('tr')).data();

            $('#m-oldpassword').val('');
            $('#m-username').val(data.username);
            $('#m-password').val('');
            $('#m-password1').val('');

            currentId = data['id'];

            $('#modifyModal').modal("show");
        });

        function reloadTable() {
            resetForm('search-form');   //重置所有input select
            oTable.DataTable().ajax.reload();
        }

        function redraw() {
            oTable.DataTable().draw(false);
        }

        function generateBtns(data, type, full, meta) {
            var temp = '';
            if (full.username == 'root') {
                temp = '禁止操作root超级管理员';
            } else {
                temp =
                    '<div class="btn-group">' +
                    '<button class="modify btn btn-xs btn-info">修改密码</button>' +
                    '<button class="delete btn btn-xs btn-danger">删除</button>' +
                    '</div>';
            }

            return temp;
        }

        function planify(data) {
            for (var i = 0; i < data.columns.length; i++) {
                column = data.columns[i];
                delete(column.search);
                delete(column.searchable);
                delete(column.orderable);
                delete(column.name);
                delete(column.data);
            }
            data.name = $('#s-name').val();
            delete(data.search);
        }

        function dtinit() {
            var url = "/goods/sku/page";
            oTable.DataTable({
                serverSide: true,
                ordering: false,
                searching: false,
                stateSave: false,
                autoWidth: false,
                pagingType: "full_numbers",
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                ajax: {
                    url: url,
                    type: 'GET',
                    data: function (data) {
                        planify(data);
                    }
                },
                columns: [
                    {
                        data: 'id',
                    },
                    {
                        data: 'name',
                    },
                    {
                        data: 'password',
                    },
                    {
                        data: 'created',
                        render: function (data, type, full, meta) {
                            return renderDate(data);
                        }
                    },
                    {
                        data: 'created',
                        render: function (data, type, full, meta) {
                            return renderDate(data);
                        }
                    },
                    {
                        data: 'created',
                        render: function (data, type, full, meta) {
                            return renderDate(data);
                        }
                    },
                    {
                        data: 'created',
                        render: function (data, type, full, meta) {
                            return renderDate(data);
                        }
                    },
                    {
                        data: 'created',
                        render: function (data, type, full, meta) {
                            return renderDate(data);
                        }
                    },
                    {
                        data: 'created',
                        render: function (data, type, full, meta) {
                            return renderDate(data);
                        }
                    },

                    {
                        data: 'id',
                        render: function (data, type, full, meta) {
                            return generateBtns(data, type, full, meta);
                        }
                    }

                ],
                columnDefs: [{
                    targets: "_all",
                    defaultContent: "空"
                }, {
                    targets: "_all",
                    className: 'text-center',
                    orderable: false
                }],
                language: {
                    "lengthMenu": "每页 _MENU_ 条记录",
                    "zeroRecords": "<h4 class='text-center'>没有找到记录</h4>",
                    "info": "显示 _START_ 到 _END_ 行，总共 _TOTAL_ 行， 第 _PAGE_ 页 ( 共 _PAGES_ 页 )",
                    "infoEmpty": "无记录",
                    "infoFiltered": "(从 _MAX_ 条记录过滤1)",
                    "search": "查询：",
                    "paginate": {
                        "first": "首页",
                        "last": "尾页",
                        "previous": "上一页",
                        "next": "下一页"
                    }
                }
            });
        }

        $(document).ready(function () {
            dtinit();

        })


        $('#addSkuAttribute').click(function (e) {

            var attr = $('#sku-attribute').val();


            var html = "   <div class=\'row\'>"
                + "                                <div class=\'col-sm-12\'>"
                + "                                    <div class=\'col-sm-12\'"
                + "                                         style=\'height: 50px;border-bottom: 1px solid rgba(0,0,0,0.1)\'>"
                + "                                        <div class=\'form-group\' style=\'font-size: 14px\'>"
                + "                                            <div class=\'col-sm-4\'>"
                + "                                                <div class=\'form-group\' style=\'margin-top: 8px;\'>"
                + "                                                    <input class=\'form-control\' style=\'border: 1px dashed #ccc;\' value=\'" + attr + "\'>"
                + "                                                </div>"
                + "                                            </div>"
                + "                                            <div class=\'col-sm-5\'>"
                + "                                            </div>"
                + "                                            <div class=\'col-sm-3\' style=\'margin-top: 15px\'>"
                + "                                                <a class=\'delete\' style=\'cursor:pointer\'>删除</a>"
                + "                                            </div>"
                + "                                        </div>"
                + "                                    </div>"
                + "                                </div>"
                + "                            </div>"


            $('#attribute-group').append(html)
        })


        $('#attribute-group').on('click', '.delete', function (e) {
            $(this).parents(".row").remove();
        });


        function addSku() {
            $.ajax({
                type: "POST",
                url: "/goods/sku/add",
                data: {
                    "name": $("#a-name").val(),
                },
                success: function (result) {
                    if (result.code == 200) {
                        console.log(result.code);
                        $('#myModal').modal('hide');
                        toastr.success('添加成功');
                        redraw();
                    } else {
                        toastr.error(result.msg);
                    }
                },
                statusCode: {
                    400: function () {
                        toastr.warning('服务器忙,请稍后重试！');
                    }
                }
            });

        }

    </script>


</div>
</body>
</html>
